<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <!-- 准备好一个容器-->
    
    <!--引入react核心库-->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!--引入react.dom 用于支持react操作dom-->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!--引入bable 用于将jsx转换为js-->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">

    //创建组件
    class Life extends React.Component{
        state={
            opacity:1
        }
        componentDidMount(){
         this.timer=   setInterval(()=>{
            //获取原状态
            let {opacity}=this.state;
            opacity-=0.1;
            //减小0.1
            //到了0 重新为1
            if(opacity<=0) opacity=1;
            //更新透明度
             this.setState({opacity})
            
            },200)
        }
        render(){
            return(
                <div>
                    <h2 style={{opacity:this.state.opacity}}>学不会了怎么办</h2>
                    <button onClick={this.go}>不活了</button>
                </div>
            )
        }
        //组件将要卸载时调用
        componentWillUnmount(){
         clearInterval(this.timer);
        }
        go=()=>{
            //卸载之前清空定时器

            //卸载组件
            ReactDOM.unmountComponentAtNode(document.getElementById('test'));
        }
    }
    //渲染组件
    ReactDOM.render(<Life/>,document.getElementById('test'));
    </script>
</body>
</html>